<template>
<view class="cart-bottom-bar">
  <view class="all-select"  @click="allChecked">
    <check-button class="check-button" :is-checked="isAllChecked"   />
    <text>全选</text>
  </view>
  <view class="total">
   <text>合计:￥{{getTotalPrice}}</text>
  </view>
  <view class="goBuy">
    <text>去结算({{goBuyLength}})</text>
  </view>
</view>
</template>

<script>
import CheckButton from "../../../components/checkButton/CheckButton.vue";
// import {mapGetters} from 'vuex'
export default {
  name: "CartBottomBar",
  components: {
    CheckButton
  },

  data(){
    return {
      totalPrice: 0,
      isActive: true,
      isAllCheck: false
    }
  },
  computed: {
    // ...mapGetters({
    //   cartLength: 'cartLength',
    //   cartList: 'cartList'
    // }),
    getTotalPrice(){
      // console.log(this.cartList);
      // for(let i = 0; i < this.cartLength; i++){
      //   console.log(this.cartList[i].price);
      //   console.log(this.cartList[i].count);
      //   this.totalPrice += this.cartList[i].price * this.cartList[i].count
      //   console.log(this.totalPrice);
      // }
      return this.$store.state.cartList.filter(item => {
        return item.checked
      }).reduce((preValue, item) => {
        return preValue + item.price * item.count
      },0).toFixed(2)
    },
    goBuyLength(){
      return this.$store.state.cartList.filter(item => item.checked).length
    },
    isAllChecked(){
			// console.log(this.$store.state.cartList.length)
			// console.log(this.goBuyLength)
      if(this.$store.state.cartList.length === 0) return false
      return this.$store.state.cartList.length === this.goBuyLength
    }
  },
  methods: {
    allChecked(){
			
      if(this.isAllChecked){
        this.$store.state.cartList.forEach(item => {
					item.checked = false 
					console.log(item)
				})
      }else {
        this.$store.state.cartList.forEach(item => item.checked = true)
      }

      // this.isAllCheck ? this.$store.state.cartList.forEach(item => item.checked = false) : this.$store.state.cartList.forEach(item => item.checked = true)
    }
  }
}
</script>

<style lang="scss">
  .cart-bottom-bar{
		position: fixed;
		z-index: 99;
		bottom: 50px;
		width: 750rpx;
    height: 40px;
    background-color: #fff;
    display: flex;
    text-align: center;
    font-size: 15px;
  }
  .all-select{
    height: 40px;
    position: relative;
    padding-top: 11px;
    width: 60px;
    margin-left: 5px;
  }
  .check-button{
    float: left;
    width: 20px;
    height: 20px;
  }
  .total{
    flex: 1;
    line-height: 40px;
    height: 40px;
  }
  .goBuy{
    width: 90px;
    height: 40px;
    line-height: 40px;
    background-color: $high-color;
    color: #fff;
  }

</style>
